<html>
   <head>
	<!-- http://googleajaxsearchapi.blogspot.com/2008/05/speed-up-access-to-your-favorite.html -->
	<script src="http://www.google.com/jsapi"></script>
	<script src="travelplanner.js"></script>
	<link href="travelplanner.css" type="text/css" rel="stylesheet" />
  </head>
  <body>

	<h2>Available options</h2>

	<p>
		Drag and drop the items you wish to have more information about to your plan below.
	</p>

	<div class="items">
		<p class="item" id="welcome-sms">
			Welcome SMS
			<span class="remove">[ remove ]</span>
		</p>


		<p class="item" id="facebook-group">
			Facebook Grop
			<span class="remove">[ remove ]</span>
		</p>


		<p class="item" id="ecommece-site">
			eCommerce site
			<span class="remove">[ remove ]</span>
		</p>

		<div style="clear: both"><!-- --></div>
	</div>

	<h2>My Plan</h2>

	<div class="selected-plan">
		<span class="help-text">Drag and drop your wishlist here</span>
		<div style="clear: both"><!-- --></div>
	</div>

	<h2>Send your plan for</h2>
	<p>	
		Please fill the form below and we will contact you shortly 
		regarding your plan.
	</p>
	<form name="">
		<p>
			<label for="email">Email</label>		
			<input name="email" type="text" />
		</p>

		<!-- Please use type="hidden" in the final version - this is just for the demostration -->
		<p>
			<label for="plan">Selected plan (this is hidden input in the final version)</label>		
			<input name="plan" type="text" />
		</p>

		<button>Submit</button>
	</form>	
      
   </body>
</html>
